<!DOCTYPE html>
<!--导入模板标签!!!!!-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表数据</title>
	<!-- 
		1.引入函数类库 
		2.使用模板工具类中的静态资源文件默认的路径都在static目录下
	-->
	<script src="/jquery-3.6.0.min.js"></script>
	<script>
		//1.jQuery中有一种编程思想 函数式编程
		$(function(){
			//让整个页面加载完成之后再执行. 以后所有的操作都应该在函数内完成!!!!
			
			/**
			 * 常见Ajax用法
			 * 1.$.get(url地址,提交数据,回调函数,返回值类型)
			 * 2.$.post(...)
			 * 
			 * for循环的写法
			  1.常规for循环
				  for(var i=0;i<result.length;i++){
					var user = result[i];
					console.log(user)
				  }
			  
			  2.使用in的关键字
				  //关键字 in index 代表遍历的下标
				  for(index in result){
					var user = result[index]
					console.log(user)
				  }
			 * 
			 
			  3.使用of关键字
				for(user of result){
					console.log(user)
				}
			  
			
			 * 业务需求:
			 * 	要求向后端服务器发起请求 /findAjaxUser,之后将返回值结果 进行页面解析
			 */
			
			$.get("/findAjaxUser",function(result){
				//1.result是服务器返回的结果 [{},{},{}....}]
				//2.将返回值结果进行循环遍历
				for(user of result){
					//3.获取对象的属性值
					var id = user.id
					var name = user.name
					var age = user.age
					var sex = user.sex
					var tr = "<tr align='center'><td>"+ id +"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
					
					//4.选中id=userTable的元素
					//5.之后追加数据append(追加的内容)
					$("#userTable").append(tr)
				}
			})
			
		
			/**
			 * 参数说明: 
			 * 	1.字符串拼接
			 * 	   语法:key=value&key2=value2....
			 * 	   例如: id=1&name=tom
			 * 
			 *  2.js对象的写法 
			 * 	   语法: {key:value,key2:value2.....}
			 * 	   例如: {id:1,name='tom'} 	
			 */
			
			/* $.get("/findAjaxUser",'id=1&name=tom',function(result){
				console.log("ajax请求成功!!!")
			}) */
			
			console.log("对象结构的语法")
			$.get("/findAjaxUser",{id:1,name:'tomcat'},function(result){
				console.log("ajax Get请求成功!!!")
			})
			
			$.post('findAjaxUser',{id:1,name:'tomcat'},function(result){
				
				console.log("post请求执行成功")
			})
			
			//要求返回值都是json字符串.
			$.getJSON('findAjaxUser',{id:1,name:'tomcat'},function(resuslt){
				console.log("getJSON的请求数据!!!")
			})
			
			//最为基本的ajax
			$.ajax({
				type:	"put",    				 //请求的类型
				url: 'findAjaxUser',	         //请求的路径
				data: {id:1,name:'tomcat猫'},	 //请求的参数
				//成功之后的回调函数
				success: function(result){		 //成功回调
					console.log("ajax请求成功!!!!")
				},
				error: function(result){		 //失败回调
					console.log("ajax请求失败")
				}
			})
		})
		
	</script>
</head>
<body>
	
	<h1>修改数据</h1>
	<div>
		<p>编号:</p>
		<p>姓名:</p>
		<p>年龄:</p>
		<p>性别:</p>
		<button>更新</button>
	</div>
	<hr />
	<!--  -->
    <table id="userTable" border="1px" align="center" width="800px">
        <tr align="center">
            <td colspan="4"><h3>用户列表</h3></td>
        </tr>
        <tr align="center">
            <td>ID</td>
            <td>名称</td>
            <td>年龄</td>
            <td>性别</td>
			<td>操作</td>
        </tr>
		<tr align="center">
		    <td>1</td>
		    <td>测试</td>
		    <td>18</td>
		    <td>男</td>
			<td>
				<button>修改</button>
				<button>删除</button>
			</td>
		</tr>
    </table>
</body>
</html>